<template>
    <el-form :inline="true" :model="form" class="demo-form-inline" style="width: 60%; margin: 0 auto;">
        <h2>我的宠物</h2>

        <el-row style="margin-bottom: 20px;">
            <el-col :span="6">
                <el-upload
                    :action="baseUrl + '/files/upload'"
                    :on-success="handleFileUpload"
                    :show-file-list="false"
                    class="avatar-uploader">
                    <img v-if="form.img" :src="form.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-col>
            <el-col :span="8" style="margin-top: 20px;">
                <el-form-item label="宠物姓名">
                    <el-input style="width: 200px;" v-model="form.name" placeholder="请输入宠物姓名" clearable />
                </el-form-item>
                <el-form-item label="宠物种类">
                    <el-select v-model="form.typeId" placeholder="请选择宠物分类" style="width: 200px;">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="10" style="margin-top: 20px;">
                <el-form-item label="宠物性别">
                    <el-select
                        v-model="form.sex"
                        placeholder="请选择宠物性别"
                        style="width: 200px;"
                        clearable>
                        <el-option label="公" value="公" />
                        <el-option label="母" value="母" />
                    </el-select>
                </el-form-item>
                <el-form-item label="宠物体温" label-suffix="℃">
                    <el-input-number v-model="form.centigrade" :precision="2" :step="1" /><span style="margin-left: 10px; color: gray;">℃</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="宠物体重">
            <el-input-number v-model="form.weight" :precision="2" :step="1" /><span style="margin-left: 10px; color: gray;">kg</span>
        </el-form-item>
        <el-form-item label="宠物身高">
            <el-input-number v-model="form.height" :precision="2" :step="1" /><span style="margin-left: 10px; color: gray;">cm</span>
        </el-form-item>
        <el-form-item label="宠物心率">
            <el-input-number v-model="form.heartRate" :step="1" /><span style="margin-left: 10px; color: gray;">次/分</span>
        </el-form-item>
        <div style="width: 100%; position: sticky;">
            <el-button type="primary" @click="onSubmit" style="position: absolute; right: 0;">提交</el-button>
        </div>

        <el-tabs v-model="activeName" class="demo-tabs"  style="margin-top: 20px;">
            <el-tab-pane label="体检记录" name="checkUpLog">
                <el-button type="primary" @click="checkUpDialogFormVisible=true">新增体检记录</el-button>
                <el-table :data="checkUp.list" style="width: 100%">
                    <el-table-column prop="id" label="id" width="80" />
                    <el-table-column prop="name" label="体检名称" width="180" />
                    <el-table-column prop="date" label="体检日期" width="180" />
                    <el-table-column prop="result" label="体检结果" />
                    <el-table-column prop="report" label="报告单" width="180">
                        <template v-slot="scope">
                            <el-image style="width: 50px; height: 50px; border-radius: 5px" :src="scope.row.report" :preview-src-list="[scope.row.report]" preview-teleported></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="action" label="操作" width="100">
                        <template v-slot="scope">
                            <el-button type="primary" link @click="delCheckUp(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="card" v-if="checkUp.total">
                    <el-pagination @current-change="load" background layout="total, prev, pager, next" :page-size="checkUp.params.pageSize" v-model:current-page="checkUp.params.pageNum" :total="checkUp.total" />
                </div>
            </el-tab-pane>
            <el-tab-pane label="疫苗记录" name="vaccineLog">
                <el-button type="primary" @click="vaccineDialogFormVisible = true">新增疫苗记录</el-button>
                <el-table :data="vaccine.list" style="width: 100%">
                    <el-table-column prop="id" label="id" width="80" />
                    <el-table-column prop="name" label="疫苗名称" width="180" />
                    <el-table-column prop="date" label="疫苗日期" width="180" />
                    <el-table-column prop="vaccineBrand" label="疫苗品牌" />
                    <el-table-column prop="dosage" label="剂量(ml)" width="180" />
                    <el-table-column prop="action" label="操作" width="100">
                        <template v-slot="scope">
                            <el-button type="primary" link @click="delVaccine(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="card" v-if="vaccine.total">
                    <el-pagination @current-change="load" background layout="total, prev, pager, next" :page-size="vaccine.params.pageSize" v-model:current-page="vaccine.params.pageNum" :total="vaccine.total" />
                </div>
            </el-tab-pane>
        </el-tabs>
        
    </el-form>

    <el-dialog v-model="checkUpDialogFormVisible" title="新增体检记录" width="600">
        <div style="padding: 0 5%;">
            <el-form :model="checkUp.form" :rules="checkUp.rules" ref="checkUpFormRef">
                <el-form-item label="体检名称" prop="name">
                    <el-input v-model="checkUp.form.name" autocomplete="off" placeholder="请输入体检名称"/>
                </el-form-item>
                <el-form-item label="体检日期" prop="date">
                    <el-date-picker
                        v-model="checkUp.form.date"
                        type="date"
                        placeholder="请选择体检日期"
                        style="width: 100%;"
                        value-format="YYYY-MM-DD"
                        :size="size"
                    />
                </el-form-item>
                <el-form-item label="体检结果" prop="result">
                    <el-input type="textarea" :rows="2" v-model="checkUp.form.result" autocomplete="off" placeholder="请输入体检结果"/>
                </el-form-item>
                <el-form-item label="体检报告" prop="report">
                    <el-upload
                        :action="baseUrl + '/files/upload'"
                        :headers="{ 'token': user.token }"
                        :on-success="handleFileUploadCheckUp"
                        list-type="picture"
                    >
                        <el-button type="primary">上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
        </div>

        <template #footer>
        <div class="dialog-footer">
            <el-button @click="checkUpDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmitCheckUp">
            提交
            </el-button>
        </div>
        </template>
    </el-dialog>

    <el-dialog v-model="vaccineDialogFormVisible" title="新增疫苗记录" width="600">
        <div style="padding: 0 5%;">
            <el-form :model="vaccine.form" :rules="vaccine.rules" ref="vaccineFormRef">
                <el-form-item label="疫苗名称" prop="name">
                    <el-input v-model="vaccine.form.name" autocomplete="off" placeholder="请输入疫苗名称"/>
                </el-form-item>
                <el-form-item label="疫苗日期" prop="date">
                    <el-date-picker
                        v-model="vaccine.form.date"
                        type="date"
                        placeholder="请选择疫苗日期"
                        style="width: 100%;"
                        value-format="YYYY-MM-DD"
                        :size="size"
                    />
                </el-form-item>
                <el-form-item label="疫苗品牌" prop="vaccineBrand">
                    <el-input :rows="2" v-model="vaccine.form.vaccineBrand" autocomplete="off" placeholder="请输入疫苗品牌"/>
                </el-form-item>
                <el-form-item label="疫苗剂量" prop="dosage">
                    <el-input-number v-model="vaccine.form.dosage" :precision="2" :step="1" /><span style="margin-left: 10px; color: gray;">ml</span>
                </el-form-item>

            </el-form>
        </div>

        <template #footer>
        <div class="dialog-footer">
            <el-button @click="vaccineDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmitVaccine">
            提交
            </el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script setup>
import request from '@/utils/request';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
const baseUrl = import.meta.env.VITE_BASE_URL
const activeName = ref('checkUpLog')
const user = JSON.parse(localStorage.getItem('xm-user') || '{}')
const typeList = ref()
request.get('/petType/selectAll').then(res =>{
  typeList.value = res.data
})

const loadPetHealth = () => {
  request.get('/petHealth/query/user').then(res => {
    form.value = res.data
  })
}
loadPetHealth()


const checkUp = reactive({
    list: [],
    params: {
        pageSize: 3,
        pageNum: 1,
    },
    form: {},
    total: 3,
    rules: {
        name: [
            { required: true, message: '请输入体检名称', trigger: 'blur' }
        ],
        date: [
            { required: true, message: '请选择体检名称', trigger: 'blur' }
        ],
        result: [
            { required: true, message: '请输入体检结果', trigger: 'blur' }
        ],
        report: [
            { required: true, message: '请上传体检报告单', trigger: 'blur' }
        ],
    }
})
const loadCheckUp = () => {
  request.get('/petCheckUpInfo/list', {params: checkUp.params}).then(res => {
    checkUp.list = res.data.list
    checkUp.total = res.data.total
  })
}
loadCheckUp()
const vaccine = reactive({
    list: [],
    params: {
        pageNum: 1,
        pageSize: 4,
    },
    form: {},
    total: 3,
})
const loadVaccine = () => {
  request.get('/petVaccine/list', {params: vaccine.params}).then(res => {
    vaccine.list = res.data.list
    vaccine.total = res.data.total
  })
}
loadVaccine()
const form = ref({
    id: undefined,
    img: undefined,
    centigrade: 30.0,
    typeId: undefined,
    weight: 10.00,
    height: 60.00,
    heartRate: 80,
})

const handleFileUpload = (res) => {
    form.img = res.data
}
const handleFileUploadCheckUp = (res) => {
    checkUp.form.report = res
}

const checkUpDialogFormVisible = ref(false)
const vaccineDialogFormVisible = ref(false)

const checkUpFormRef = ref()
const vaccineFormRef = ref()

const handleSubmitCheckUp = async () => {
   await checkUpFormRef.value.validate()
   const res = await request.post('/petCheckUpInfo/save', checkUp.form)
   if (res.code == 200) {
      ElMessage.success('保存成功')
      checkUpDialogFormVisible.value = false
      checkUpFormRef.value.resetFields()
      loadCheckUp()
   }else {
      ElMessage.error('系统异常')
   }
}
const handleSubmitVaccine = async () => {
   await vaccineFormRef.value.validate()
   const res = await request.post('/petVaccine/save', vaccine.form)
   if (res.code == 200) {
      ElMessage.success('保存成功')
      vaccineDialogFormVisible.value = false
      vaccineFormRef.value.resetFields()
      loadVaccine()
   }else {
      ElMessage.error('系统异常')
   }
}


const delCheckUp = async (id) => {
    const res = await request.delete('/petCheckUpInfo/delete/'+id)
    if (res.code == 200) {
        ElMessage.success('操作成功')
        loadCheckUp()
    }
}

const delVaccine = async (id) => {
    const res = await request.delete('/petVaccine/delete/'+id)
    if (res.code == 200) {
        ElMessage.success('操作成功')
        loadVaccine()
    }
}

const onSubmit = () => {
    request.post('/petHealth/save', form.value).then(res => {
        if (res.code == 200) {
            ElMessage.success("保存成功")
            loadPetHealth()
        }else {
            ElMessage.error("保存失败")
        }
    })
}
</script>

<style scoped>
.avatar-uploader {
  height: 120px;
}
.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>